<template>
	<view class="container">
		<view class="series-list" v-for="(item,index) in seriesList" :key="index">
			<view class="s-name">{{item.name}}</view>
			<view class="s-list">
				<view @click="seriesClick(item,childItem)" class="list-item" v-for="(childItem,childIndex) in item.children" :key="childIndex">
					<view class="series-left">{{childItem.name}}</view>
					<view class="series-right" v-if="false">
						<text>{{childItem.name}}条</text>
						<image src="@/static/fanhui.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { carsVehicleSeriesList } from '@/api/newCarSerach.js'
	export default {
		data() {
			return {
				brand_id: '',
				brand_name: '',
				seriesList:[]
			}
		},
		onLoad(option) {
			this.brand_id = option.brand_id
			this.init(option.brand_id)
		},
		methods: {
			init(brand_id){
				carsVehicleSeriesList(brand_id).then( res => {
					this.seriesList = res.data
					console.log(this.seriesList)
				})
			},
			seriesClick(item,childItem){
				console.log(childItem)
				var that = this
				uni.navigateTo({
					url: `/pages/home/newCarSearch/releaseCar/selectBrand/selectCarModel?series_one_id=${childItem.parent_id}&series_id=${childItem.id}&brand_id=${this.brand_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #F7F8FA;
		.series-list{
			.s-name{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 12rpx 25rpx;
			}
			.s-list{
				.list-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					padding: 30rpx 25rpx;
					border-bottom: 1rpx solid #E6E6E6;
					&:last-child{
						border-bottom: none;
					}
					.series-left{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
					.series-right{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						image{
							width: 14rpx;
							height: 16rpx;
							margin-left: 15rpx;
						}
					}
				}
			}
		}
	}

</style>
